import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../common/app_colors.dart';
import '../../common/app_text_style.dart';
import '../../widget/indicator/material_indicator.dart';
import 'tab_bar_logic.dart';
import 'tab_bar_movies/tab_bar_movies_view.dart';
import 'tab_bar_teleplay/tab_bar_teleplay_view.dart';

class TabBarPage extends StatefulWidget {
  const TabBarPage({Key? key}) : super(key: key);

  @override
  State<TabBarPage> createState() => TabBarPageState();
}

class TabBarPageState extends State<TabBarPage> {
  final logic = Get.put(TabBarLogic());
  final state = Get.find<TabBarLogic>().state;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: SizedBox(
          width: 300.w,
          height: 40.w,
          child: Container(
              padding: EdgeInsets.only(right: 60.w),
              alignment: Alignment.center,
              child: tabBar()),
        ),
      ),
      body: Column(
        children: [
          Expanded(
              child: ExtendedTabBarView(
                  shouldIgnorePointerWhenScrolling: false,
                  controller: state.tabController,
                  children: [TabBarMoviesPage(), TabBarTeleplayPage()]))
        ],
      ),
    );
  }

  Widget tabBar() {
    return TabBar(
      controller: state.tabController,
      indicatorColor: AppColors.contentColorRed,
      tabs: state.tabs,
      isScrollable: true,
      labelStyle: TS_FFE80054_16_w5,
      labelColor: AppColors.contentColorRed,
      unselectedLabelStyle: TS_FFE80054_16_w4,
      unselectedLabelColor: AppColors.contentColorRed,
      indicator: const UIMaterialIndicator(
          height: 3,
          color: AppColors.contentColorRed,
          topLeftRadius: 4,
          topRightRadius: 4,
          bottomLeftRadius: 4,
          bottomRightRadius: 4,
          paintingStyle: PaintingStyle.fill,
          horizontalPadding: 20,
          tabPosition: TabPosition.bottom,
          tabOffsetValue: -5),
      onTap: (int index) {
        print('点击了tab==$index个');
      },
    );
  }
}
